<template>
  <el-dropdown
    size="medium"
    class="international-icon"
    trigger="click"
    @command="handleSetLanguage"
  >
    <span class="el-dropdown-link">
      {{ currnetText }}
      <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh" :disabled="language === 'zh'">{{
        zhText
      }}</el-dropdown-item>
      <el-dropdown-item command="en" :disabled="language === 'en'" divided>{{
        enText
      }}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  data() {
    return {
      zhText: "Chinese(中文 zh-CN)",
      enText: "English(英语 en-US)",
      currnetText: null,
    };
  },
  computed: {
    //动态计算
    language() {
      //获取当前语言
      let thisLang = this.$store.getters.language;
      this.currnetLang(thisLang);
      return thisLang;
    },
  },
  methods: {
    //处理选中的语言
    handleSetLanguage(lang) {
      this.currnetLang(lang);
      //this.$message(lang);
      this.$i18n.locale = lang;
      this.$store.dispatch("setLanguage", lang);
      //this.$message(this.$i18n.t('home.helmet'));
      //强制刷新
      //window.location.reload();
    },
    //显示当前语言
    currnetLang(lang) {
      if (lang == "zh") this.currnetText = this.zhText;
      else if (lang == "en") this.currnetText = this.enText;
    },
  },
};
</script>
<style scoped>
.international-icon {
  font-size: 14px;
  cursor: pointer;
  color: #ffffff;
  z-index: 9999999;
  padding: 18px 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #ffffff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>